// -----------------------获取数据并渲染-----------------------
function renderCategory() {
  // 发送ajax请求
  $.ajax({
    url: '/my/category/list',
    success: function (res) {
      console.log(res);
      if (res.status === 0) {
        let str = ''
        res.data.forEach(item => {
          str += `
          <tr>
            <td>${item.name}</td>
            <td>${item.alias}</td>
            <td>
              <button type="button" data-id="${item.id}" data-name="${item.name}"data-alias="${item.alias}" class="layui-btn layui-btn-xs">编辑</button>
              <button type="button" data-id="${item.id}" class="layui-btn layui-btn-xs layui-btn-danger del">删除</button>
            </td>
          </tr>
          `
        })
        // 遍历后,放到tbody
        $('tbody').html(str)
      }
    }
  })
}
renderCategory()

// --------------------------添加类别------------------------
let addIndex
$('button:contains("添加类别")').on('click', function () {
  addIndex = layer.open({
    // 弹层配置项,目录基础参数找
    type: 1,
    title: '添加类别',
    // 获取form结构
    content: $('#tpl-add').html(),
    area: ['500px', '250px']
  })
})
// 表单提交 --> 阻止默认行为 --> 收集数据 --> ajax提交
$('body').on('submit', '#add-form', function (ev) {
  // 阻止默认行为
  ev.preventDefault()
  // 收集数据
  let data = $(this).serialize()
  $.ajax({
    type: 'POST',
    url: '/my/category/add',
    data: data,
    success: function (res) {
      layer.msg(res.message)
      if (res.status === 0) {
        renderCategory()
        // 清除弹层
        layer.close(addIndex)
      }
    }
  })
})

// ----------------------删除----------------------
$('tbody').on('click', '.del', function () {
  let id = $(this).data('id')
  layer.confirm('你确定要删除吗?', function (index) {
    //do something
    $.ajax({
      url: '/my/category/delete',
      data: { id: id },
      success: function (res) {
        if (res.status === 0) {
          // 重新加载数据
          renderCategory()
        }
      }

    })
    layer.close(index)
  })

})

// ----------------------------编辑类别--------------------
let editIndex
$('tbody').on('click', 'button:contains("编辑")', function () {
  // console.log(123)
  // 数据回填
  let data = $(this).data() //自定义属性的全部值
  // console.log(data)
  editIndex = layer.open({
    // 弹层配置项,目录基础参数找
    type: 1,
    title: '编辑类别',
    // 获取form结构
    content: $('#tpl-edit').html(),
    area: ['500px', '250px'],
    success: function () {
      let form = layui.form
      form.val('edit', data)
    }
  })
})
// ---------------------------确认按钮----------------------
$('body').on('submit', '#edit-form', function (ev) {
  ev.preventDefault()
  let data = $(this).serialize()
  $.ajax({
    type: 'POST',
    url: '/my/category/update',
    data: data,
    success: function (res) {
      // console.log(res)
      if (res.status === 0) {
        layer.msg(res.message)
        renderCategory()
        layer.close(editIndex)
      }
    }
  })
})